{% extends 'base_backend.html' %}
{% load static admin_static i18n %}
{% load zhongbao_admin_filtets %}
{% load config_filters %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <style>
        .table-hover > tbody > tr:hover > td,
        .table-hover > tbody > tr:hover > th {
            background-color: #5ac8da;
        }

        .btn-link:hover {
            color: #1421c5;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <div>
        <div class="box-header with-border">
            <h3 class="box-title">{{ model_verbose_name }}查询</h3>
            {% if perms.config.add_config %}
                <a href="{% url 'task:add_config' %}" target="_blank" style="float: right; ">
                    <span class="btn btn-success btn-sm" style="float: right;" id="form-add">
                        <b style="font-size: 16px">+</b>添加
                    </span>
                </a>
            {% endif %}
        </div>
        <!-- form start -->
        <div class="box box-primary">
            <div class="box-header with-border" style="border-color: #1b6d85">

                <!-- Date range -->
                <form action="{% url 'task:select_search' %}" method="get">{% csrf_token %}
                    <input class="no-display" type="text" name="config-select-tag" id="config-select-tag"
                           value="config">
                    <p style="clear: both"></p>
                    <div>
                        <div style="float: left;" class="select-config-div">
                            <label for="domains" class="control-label">配置ID：</label>
                            <p>
                                <input id="domains" name="domains" type="text" class="config-input"
                                       placeholder="精确搜索">
                            </p>

                        </div>
                        <div style="float: left; " class="select-config-div">
                            <label for="savename" class="control-label">文件名：</label>
                            <p>
                                <input id="savename" name="savename" type="text" class="config-input"
                                       placeholder="模糊搜索,包含">
                            </p>
                        </div>
                        {% for field in form %}
                            {% if field.name in kwargs.fields_exclude %}
                                <div class="input-group select-config-div" style="float: left; ">
                                    <label for="" class="control-label">{{ field.label }}：</label>
                                    <p>{{ field }}</p>
                                </div>
                            {% endif %}
                        {% endfor %}
                        {% for field in form %}
                            {% if field.name not in kwargs.fields_exclude %}
                                <div class="input-group select-config-div" style="float: left; ">
                                    <label for="" class="control-label"
                                           title="{{ field.help_text }}">{{ field.label }}：</label>
                                    <p>{{ field }}</p>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <div class="input-group select-config-div" style="float: left; ">
                            <label for="" class="control-label">是否启用：</label>
                            <select name="select-options2" id="select-options2" class="config-input">
                                {% for select in kwargs.select_options2 %}
                                    <option value="{{ forloop.counter0 }}"
                                            {% ifequal forloop.counter0 status %}selected{% endifequal %}>{{ select }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="input-group select-config-div" style="float: left;">
                            <label for="" class="control-label">是否删除：</label>
                            <select name="delete_options" id="delete_options" class="config-input">
                                {% for select in kwargs.delete_options %}
                                    <option value="{{ forloop.counter0 }}"
                                            {% ifequal forloop.counter0 delete_status %}selected{% endifequal %}>{{ select }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="input-group select-config-div" style="clear: both; float: left;">
                            <label for="" class="control-label">是否分组：</label>
                            <select name="group_options" id="group_options" class="config-input">
                                {% for select in kwargs.group_options %}
                                    <option value="{{ forloop.counter0 }}"
                                            {% ifequal forloop.counter0 group_status %}selected{% endifequal %}>{{ select }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% if perms.config.view_repeattimes %}
                            <div class="input-group select-config-div" style="float: left;">
                                <label for="" class="control-label">重复次数：</label>
                                <div>
                                    <input name="begin_repeat_times" id="begin_repeat_times" class="config-input"
                                           type="number" value="1" style="width: 45%">
                                    <input name="end_repeat_times" id="begin_repeat_times" class="config-input"
                                           type="number" value="100" style="width: 45%">
                                </div>
                            </div>
                        {% endif %}
                        <div class="input-group" style=";float: right">
                            <input type="text" class="no-display" name="tag" value="search">
                            <button class="form-control pull-left btn btn-sm btn-primary"
                                    style="margin-top:20px;width: 50px">检索
                            </button>
                        </div>
                    </div>
                <!--
                    <div>
                    </div>
                    -->
                    <p style="clear: both"></p>
                    <div class="form-group">
                        {#                        <div class="input-group" style="float: left">#}
                        {#                            <select name="select-options1" id="select-options1" class="form-control">#}
                        {#                                {% for select in kwargs.select_options1 %}#}
                        {#                                    <option value="{{ forloop.counter0 }}"#}
                        {#                                            {% ifequal forloop.counter0 kwargs.select_options1_tag %}selected{% endifequal %}>{{ select }}</option>#}
                        {#                                {% endfor %}#}
                        {#                            </select>#}
                        {#                        </div>#}
                        {#                        <div id="search-domains-div"#}
                        {#                             class="input-group {% if kwargs.select_options1_tag == 1 %}no-display{% endif %}"#}
                        {#                             style="width: 15%;float: left">#}
                        {#                            <input id="domains" name="domains" type="text" class="form-control pull-right"#}
                        {#                                   size="80px"#}
                        {#                                   placeholder="精准搜索,多个用空格间隔">#}
                        {#                        </div>#}

                    </div>
                </form>

            </div>
            <div class="box-header">
                <div style="float: left; margin-right: 20px;">
                    <span>每页显示</span>
                    <span><select name="" id="page-num-select">
                    {% for num in kwargs.per_page_num %}
                        <option value="{{ num }}" {% ifequal num limit %}selected{% endifequal %}>{{ num }}</option>
                    {% endfor %}
                </select></span>
                    <span>条</span>
                    <a href="{{ page_args }}" class="no-display" id="page-num-change-a"><span id="page-num-change-sure">确定</span></a>
                </div>
                {% if delete_config %}
                    <button class="btn " id="model_delete"><a href="#">删除{{ model_verbose_name }}</a></button>
                {% endif %}
                <div style="float: left; margin-right: 20px; color: #00a7d0">
                    <span style="margin-right: 10px" id="config-all-num">共：{{ all_num }}</span>
                </div>
                {% if perms.config.view_assign_spider %}
                    <div style="float: left; margin-right: 20px; color: #00a7d0">
                        <span style="margin-right: 10px" class="btn btn-primary btn-xs" id="spider-assign">指定给爬虫</span>
                    </div>
                    <div style="float: left; margin-right: 20px;">
                        <span style="margin-right: 10px;" class="btn btn-xs btn-primary-one"
                              id="exact-spider-assign">精确指定爬虫</span>
                        <p style="display: none;"
                           id="spiders_get_by_type_url">{% url 'task:spiders_get_by_type' %}</p>
                        <!-- 精确指派爬虫弹出窗口-->
                        <div class="modal" id="exact-spider-assign-window" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel">
                            <div class="modal-dialog modal-lg" role="document">
                                <form class="form-horizontal" id="exact-spider-assign-form" method="post"
                                      action="{% url 'task:spider_assign_exact' %}">{% csrf_token %}
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close spider-close" data-dismiss="modal"
                                                    aria-label="Close"><span
                                                    aria-hidden="true" id="exact-close-top">×</span></button>
                                            <h4 class="modal-title" id="exact-spider-assign-label">指定爬虫给配置-<span
                                                    id="exact-spider-assign-label-config"></span></h4>
                                        </div>
                                        <div class="modal-body" style="">
                                            <div class="box-header with-border">
                                                <p style="float: left; margin-right: 20px">当前空闲爬虫：<span
                                                        id="exact-spider-assign-free-num"></span></p>
                                                <p style="float: left; margin-right: 20px">指定爬虫数：<span
                                                        id="exact-spider-assign-all-num"></span></p>
                                                <p style="float: left; margin-right: 20px; display: none"><span
                                                        id="exact-spider-assign-all-num-real"></span></p>
                                            </div>
                                            <div style="display: none;">
                                                <input type="text" id="exact-spider-assign-url" name="reverse_url"
                                                       style="display: none"
                                                       value="{{ request.get_full_path }}">
                                                <input type="text" id="exact-spider-assign-tag" name="tag"
                                                       style="display: none"
                                                       value="config">
                                                <input type="text" id="exact-spider-assign-cid" name="spider_cid"
                                                       style="display: none" value="0">
                                            </div>
                                            <div class="box-body" id="exact-spider-assign-box-body">
                                                <div class="form-group" style="color: black">
                                                    <div style="float: left">
                                                        <b style="color: #00a7d0;">已有爬虫：</b>
                                                    </div>
                                                    <div style="float: left; margin-left: 20px">无代理爬虫数：
                                                        <span id="now_spider_num"></span>
                                                    </div>
                                                    <div style="float: left; margin-left: 20px">代理爬虫数：
                                                        <span id="now_agent_spider_num"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="color: black">
                                                    <div style="float: left">
                                                        <b style="color: #00a7d0;">指定爬虫：</b>
                                                    </div>
                                                    <div style="float: left; margin-left: 20px">无代理爬虫数：
                                                        <span id="exact_new_spider_num">0</span>
                                                    </div>
                                                    <div style="float: left; margin-left: 20px">代理爬虫数：
                                                        <span id="exact_new_agent_spider_num">0</span>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="color: black">
                                                    <div style="float: left; ">
                                                        <b style="color: #00a7d0;">爬虫类型：</b>
                                                        <select id="exact_spider_type" name="spider_type"
                                                                style="height: 26px; width: 150px">
                                                            <option value="none">-----</option>
                                                            {% for op in spider_types %}
                                                                <option value="{{ op.name }}">{{ op.name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <span>(num:[[num]])</span>
                                                    <div style="margin-bottom: 0px; float: right; display: block">
                                                        <label for="">爬虫检索:</label>
                                                        <input type="text" id="spider_search" placeholder="爬虫任意相关内容">
                                                        <span class="btn btn-info btn-xs"
                                                              style="margin-left: 10px" v-on:click="search"
                                                              title="搜索值为空，限制全部内容。"> 搜索
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="exact_table_div">
                                                    <table style="width: 90%; " id="exact_table"
                                                           class="table table-bordered table-striped">
                                                        <thead style="display: block;">
                                                        <tr style="display: block">
                                                            <th class="spider-action-checkbox" style="width: 5%">
                                                                <input type="checkbox" name="spider_th_checkbox">全选
                                                            </th>
                                                            <th style="width: 10%">爬虫ID</th>
                                                            <th style="width: 10%">爬虫IP</th>
                                                            <th style="width: 20%">代理</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody style="display: block;overflow-y: scroll; height: 400px">
                                                        <tr v-for="spider in spiders" style="display: block;">
                                                            <td class="spider-action-checkbox" style="width: 5%">
                                                                <input type="checkbox" name="spider_td_checkbox"
                                                                       value="[[spider.id]]">
                                                            </td>
                                                            <td style="width: 10%">[[spider.id]]</td>
                                                            <td style="width: 10%">[[spider.host_id]]</td>
                                                            <td style="width: 20%">
                                                                <select name="exact-proxy-[[spider.id]]"
                                                                        id="exact-proxy-[[spider.id]]"
                                                                        class="exact_spider_proxy" old_val="0">
                                                                    <option value="0">----</option>
                                                                    {% for p in proxes %}
                                                                        <option value="{{ p.id }}">{{ p.name }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" id="exact-spider-assign-close"
                                                    class="btn btn-default  spider-close"
                                                    data-dismiss="modal"><span
                                                    class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                                            </button>
                                            <button type="submit" class="btn btn-info pull-right"
                                                    id="exact-spider-assign-submit">
                                                确定
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                {% endif %}
                <div style="float: left; margin-right: 20px;">
                        <span style="margin-right: 10px;" class="btn btn-xs btn-primary"
                              id="export-data-btn">导出搜索结果</span>
                    <p style="display: none;" id="export_data_url">{% url 'task:export_configs_data' %}</p>
                    <p style="display: none;" id="filter_dict_json">{{ filter_dict_json }}</p>
                    <!-- 导出搜索结果弹出窗口-->
                    <div class="modal" id="export-data-window" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close spider-close" data-dismiss="modal"
                                            aria-label="Close"><span
                                            aria-hidden="true" id="export-data-close-top">×</span></button>
                                    <h4 class="modal-title" id="export-data-label">导出搜索结果</h4>
                                    <p style="color: red;">
                                        由于有阿拉伯文等外文域名，导出文件为utf-8编码，excel直接打开会乱码，请尽量采用wps打开。（csv转换为xlsx文件后可正常打开。）</p>
                                </div>
                                <div class="modal-body" style="">
                                    <div style="display: none;">
                                        <input type="text" id="export-data-assign-url" name="reverse_url"
                                               style="display: none"
                                               value="{{ request.get_full_path }}">
                                    </div>
                                    <div id="export-data-create">
                                        请选择您要导出的字段：
                                        <div class="box-body" id="export-data-box-body">
                                            <div class="form-group" style="color: black">
                                                {% for field in fields_dict %}
                                                    <span style="margin-right:10px;">
                                                    <input type="checkbox" value="{{ field.field }}"
                                                           name="export-data-checkbox">{{ field.name }}
                                                </span>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div id="export-data-progress" style="display: none;">
                                        <span id="export-data-num"></span>个配置信息正在生成中,请不要进行其他操作，以免产生中断···
                                        <div class="overlay">
                                            <i class="fa fa-refresh fa-spin"></i>
                                        </div>
                                    </div>
                                    <div id="export-data-result" style="display: none;">
                                        请点击下面链接下载文件：<a href="" id="export-data-file"></a>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-info"
                                            id="export-data-submit">
                                        生成表格文件
                                    </button>
                                    <button type="button" id="export-data-close"
                                            class="btn btn-default  spider-close"
                                            data-dismiss="modal"><span
                                            class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                                    </button>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="box-body">
                <form id="model_form" role="form"
                      action=""
                      method="post">{% csrf_token %}


                    <div class="group">

                        <table id="config_each_table" border="1" class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                <th class="action-checkbox"><input type="checkbox" name="th_checkbox"></th>
                                {% for field in model_list_fields %}
                                    <th>
                                        <span style="float: left">
                                            {{ field.name }}
                                        </span>
                                        {% if field.rank %}
                                            <a href="?{{ field.rank }}={{ field.rank_tag }}{{ page_args }}"
                                               style="float: right">
                                                {% if field.rank_tag == 0 %}
                                                    <i class="fa fa-fw fa-sort"></i>
                                                {% elif field.rank_tag == 1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-asc"></i>
                                                {% elif field.rank_tag == -1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </th>
                                {% endfor %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for item in topics.object_list %}
                                <tr style="{% if item.status == 0 %} background-color:#ff9e9e {% endif %}">
                                    <td class="action-checkbox"><input type="checkbox" name="td_checkbox"
                                                                       value="{{ item.id }}"></td>

                                    <td>{{ item.id }}</td>
                                    <td>{{ item.webname }}</td>
                                    <td>{{ item.url }}</td>
                                    <td>{{ item.savename }}</td>
                                    <td>{{ item.author }}</td>
                                    <td>
                                        {% if item.last_modify_time == 0 %}
                                            {{ item.savetime|timestamp_trans }}
                                        {% else %}
                                            {{ item.last_modify_time|timestamp_trans }}
                                        {% endif %}
                                    </td>
                                    <td>{{ item.gid|config_foreign_object:'gid' }}</td>
                                    <td>{{ item.webtype|config_foreign_object:'webtype' }}</td>
                                    <td width="22%">
                                        {% if item.remarks %}
                                            {% if perms.config.add_config %}
                                                <a href="{% url 'task:debug_config' item.id %}" class="btn-link"
                                                   target="_blank">
                                                    测试
                                                </a>
                                            {% endif %}
                                            {% if perms.config.check_config %}
                                                |
                                                <a href="{% url 'task:check_config' item.id %}" class="btn-link"
                                                   target="_blank">
                                                    审核
                                                </a>
                                            {% endif %}
                                            {% if perms.config.change_config %}
                                                |<a href="{% url 'task:change_config' item.id %}" class="btn-link"
                                                    target="_blank">
                                                详情
                                            </a>
                                            {% endif %}
                                            {% if perms.config.delete_config %}
                                                |<a href="#" class="btn-link delete-config-a" delcid="{{ item.id }}"
                                                    delete-flag="{{ item.delete_flag }}"
                                                    delurl="{% url 'task:delete_config' %}">

                                                {% if item.delete_flag == 0 %}
                                                    删除
                                                {% else %}
                                                    恢复
                                                {% endif %}
                                            </a>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <p>
                            <a href="?page=1{{ kwargs.url_add_args }}{{ page_args }}">首页</a>
                            {% if topics.has_previous %}
                                <a href="?page=
                                        {{ topics.previous_page_number }}{{ kwargs.url_add_args }}{{ page_args }}">上一页</a>
                            {% endif %}
                            Page {{ topics.number }} of {{ topics.paginator.num_pages }}
                            {% if topics.has_next %}
                                <a href="?page={{ topics.next_page_number }}{{ kwargs.url_add_args }}{{ page_args }}">下一页</a>
                            {% endif %}
                            <a href="?page={{ topics.paginator.num_pages }}{{ kwargs.url_add_args }}{{ page_args }}">尾页</a>
                            <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px">
                            <a href="{{ kwargs.url_add_args }}{{ page_args }}" id="page-judge-a">跳页</a>
                        </p>
                    </div>

                    <!-- /.box-footer -->
                    <div class="box-footer">
                        <button class="btn btn-primary no-display" id="submit_button">确认</button>
                        <button type="submit" class="btn btn-primary" id="save_submit" name="_save"
                                style="display: none">sure
                        </button>
                    </div>
                </form>
            </div>

            <!-- 频道弹出窗口-->
            <div class="modal fade" id="config-channels" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">频道</h4>
                        </div>
                        <div class="modal-body">

                            {% verbatim %}
                            <div class="form-group" id="channels-display" style="max-height:500px; overflow: scroll">
                                <table class="table table-bordered table-striped">
                                    <tbody id="channel-tbody">
                                    <tr v-for="channel in info">
                                        <td>{{ channel.channelname }}</td>
                                        <td>{{ channel.channelurl }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            {% endverbatim %}
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btn_close" class="btn btn-default"
                                    data-dismiss="modal"><span
                                    class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!--取消启动，删除等弹出框-->
            <div class="modal fade" id="cancel-window" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" style="top:30%">
                <div class="modal-dialog" role="document">
                    <form action="" method="post" id="cancel-form">{% csrf_token %}
                        <div class="modal-content">
                            {#                        <div class="modal-header">#}
                            {#                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span#}
                            {#                                    aria-hidden="true">×</span></button>#}
                            {#                            <h4 class="modal-title" id="cancel-label">频道</h4>#}
                            {#                        </div>#}
                            <div class="modal-body">
                                <div class="form-group" style="max-height:500px">
                                    <input type="text" id="cancel-tag" name="cancel-tag" class="no-display">
                                    <input type="text" id="url-org" name="url-org" class="no-display"
                                           value="{{ kwargs.url_org }}">

                                    <input type="text" id="cancel-cid" name="cancel-cid" class="no-display">
                                    <input type="text" id="cancel-gid" name="cancel-gid" class="no-display">

                                    <input type="text" id="cancel-value" name="cancel-value" class="no-display">
                                    <p style="color: red">确定要<span id="cancel-content"></span>?</p>
                                    <p><input type="text" placeholder="请输入原因" id="cancel-reason"
                                              name="cancel-reason" class="no-display"
                                              style="width: 60%"></p>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="cancel_close" class="btn btn-default"
                                        data-dismiss="modal">取消
                                </button>
                                <button type="submit" id="cancel-submit" class="btn btn-default">
                                    确定
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <!-- 指派爬虫弹出窗口-->
    <div class="modal" id="spider-window" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <form class="form-horizontal" id="spider-form" method="post"
                  action="{% url 'task:spider_assign' %}">{% csrf_token %}
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close spider-close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="spider-label">指定爬虫给配置-<span id="spider-label-config"></span></h4>
                    </div>
                    <div class="modal-body" style="background-color: #f9f9f9">
                        <div class="box-header with-border">
                            <p style="float: left; margin-right: 20px">当前空闲爬虫：<span id="spider-free-num"></span></p>
                            <p style="float: left; margin-right: 20px">指定爬虫数：<span id="spider-all-num"></span></p>
                            <p style="float: left; margin-right: 20px; display: none"><span
                                    id="spider-all-num-real"></span></p>
                        </div>
                        <div style="display: none;">
                            <input type="text" id="reverse_url" name="reverse_url" style="display: none"
                                   value="{{ request.get_full_path }}">
                            <input type="text" id="tag" name="tag" style="display: none" value="config">
                            <input type="text" id="spider_cid" name="spider_cid" style="display: none" value="0">
                        </div>
                        <div class="box-body" id="spider-box-body">
                            <div class="form-group" style="color: black">
                                <div style="float: left; margin-left: 20px">无代理爬虫数：<input type="number" min="0" step="1"
                                                                                          label_name="爬虫数"
                                                                                          id="spider_num"
                                                                                          name="spider_num" value="0">
                                </div>
                                <div style="float: left; margin-left: 20px">代理爬虫数：<input type="number" min="0" step="1"
                                                                                         label_name="代理爬虫数"
                                                                                         id="agent_spider_num"
                                                                                         name="agent_spider_num"
                                                                                         value="0"></div>
                                <div style="float: left; margin-left: 20px">爬虫类型：
                                    <select id="spider_type" name="spider_type" style="height: 26px; width: 150px">
                                        <option value="">-----</option>
                                        {% for op in spider_types %}
                                            <option value="{{ op.name }}">{{ op.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% for i in proxes %}
                                <div class="form-group" style="">
                                    <label for="" class="pull-left control-label"
                                           style="width: 200px; padding: 0; margin:0;">{{ i.name }}：</label>
                                    <div class="col-sm-5">
                                        <input type="number" min="0" step="1" class="form-control form-data-input"
                                               id="{{ i.name }}" name="{{ i.name }}" label_name="{{ i.name }}"
                                               value="0">
                                    </div>
                                </div>
                                <p style="clear: both"></p>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_close" class="btn btn-default  spider-close"
                                data-dismiss="modal"><span
                                class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="submit" class="btn btn-info pull-right" id="spider-submit">确定</button>
                    </div>

                </div>
            </form>
        </div>

    </div>
{% endblock section_content %}

{% block body_js %}
    {{ block.super }}
    <script src="{% static 'zhongbao/config/js/vue_bak1.js' %}"></script>
    <script src="{% static 'zhongbao/config/js/select.js' %}"></script>
    <script src="{% static 'public/ComboSelect/js/jquery.combo.select.js' %}"></script>
    {#    <script src="{% static 'zhongbao/config/js/select_pulic.js' %}"></script>#}
    <script src="{% static 'plugins/datatables/jquery.dataTables.js' %}"></script>
    <!-- DataTables -->
    {#    <script src="{% static 'plugins/datatables/jquery.dataTables.js' %}"></script>#}
    {#    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>#}


    <script type="text/javascript">
        Vue.config.delimiters = ['[[', ']]'];
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });

        // 分组、配置搜索选择
        /*
         var config_select_tag = $('#config-select-tag');
         var link_fields = $('#link-fields');
         var search_domains_div = $('#search-domains-div');
         $('#select-options1').change(function () {
         if ($(this).val() == 2) {
         config_select_tag.val('link_fields');
         link_fields.removeClass('no-display');
         search_domains_div.addClass('no-display');
         } else {
         link_fields.addClass('no-display');
         search_domains_div.removeClass('no-display');
         if($(this).val() == 0){
         config_select_tag.val('config');
         }else if($(this).val() == 1){
         config_select_tag.val('filename');
         }
         }
         });
         */

        // 选择每页条目数量
        var page_num_select = $('#page-num-select');
        var page_num_change = $('#page-num-change-a');
        page_num_select.change(function () {
            var page_num = page_num_select.val();
            var url = '?limit=' + page_num + page_num_change.attr('href');
            page_num_change.attr('href', url);
            {#           page_num_change.removeClass('no-display');#}
            $('#page-num-change-sure').click();
        });

        // 取消启动和删除等弹出窗口
        var cancel_tag = $('#cancel-tag');
        var cancel_cid = $('#cancel-cid');
        var cancel_gid = $('#cancel-gid');
        var cancel_content = $('#cancel-content');
        var cancel_value = $('#cancel-value');
        var cancel_window = $('#cancel-window');
        var cancel_form = $('#cancel-form');
        var cancel_reason = $('#cancel-reason');
        var cancel_submit = $('#cancel-submit');


        // 启动和取消启动 配置
        $('.begin-config').click(function () {
            cancel_reason.val('');
            var value, content;
            var cid = $(this).attr('begincid');
            var c_gid = $(this).attr('begingid');
            var begin_tag = $(this).attr('begintag');
            var cancel_url = $(this).attr('conurl');
            if (begin_tag == 0) {
                value = 1;
                cancel_reason.removeClass('no-display');
                cancel_reason.val('常规启动');
                content = '启动配置-' + cid
            } else {
                cancel_reason.removeClass('no-display');
                value = 0;
                content = '停止配置-' + cid
            }
            cancel_cid.val(cid);
            cancel_gid.val(c_gid);
            cancel_content.text(content);
            cancel_value.val(value);
            cancel_tag.val(value);
            cancel_form.attr('action', cancel_url);
            cancel_window.modal();
        });

        // 删除配置
        $('.delete-config-a').click(function () {
            cancel_reason.val('');
            var content;
            var begin_button = $(this).parent().children('.begin-config');
            var begin_tag = begin_button.attr('begintag');
            var cid = $(this).attr('delcid');
            var cancel_url = $(this).attr('delurl');
            var delete_flag = $(this).attr('delete-flag');

            if (begin_tag == '0') {
                if (delete_flag == '0') {
                    content = '删除配置-' + cid + '！';
                } else {
                    content = '恢复配置-' + cid + '！';
                }

                cancel_cid.val(cid);
                cancel_content.text(content);
                cancel_form.attr('action', cancel_url);
                cancel_reason.removeClass('no-display');
                cancel_window.modal();
            } else {
                var message = '您要删除的配置已经启动，请停止启动后再删除！';
                alert(message);
            }

        });

        // 删除或取消配置时的检验
        cancel_submit.click(function () {
            if (cancel_reason.hasClass('no-display') == false && cancel_reason.val().length < 1) {
                alert('请填写原因！');
                return false;
            }
        });


        {#            跳页#}
        $('#page-judge-a').click(function () {
            var page_judege = $('#page-judge').val();
            var old_href = $(this).attr('href');
            var href_judge = "?page=" + page_judege + old_href;
            $(this).attr('href', href_judge);
        });
        $(function () {
            $('#model_delete').click(function () {
                alert('您确定要删除吗？');
                $('#model_form').attr('action', '');
                $('#submit_button').click();
            });
            // 指定爬虫相关参数
            var spider_free_num = $('#spider-free-num');
            var spider_window = $('#spider-window');
            var spider_box_body = $('#spider-box-body');
            var spider_all_num = $('#spider-all-num');
            var spider_all_num_real = $('#spider-all-num-real');
            var assign_spider_num = $('#spider_num');
            var agent_spider_num = $('#agent_spider_num');
            assign_spider_num.keyup(function () {
                var all_num = parseInt(assign_spider_num.val()) + parseInt(agent_spider_num.val());
                spider_all_num.text(all_num);
            });
            agent_spider_num.keyup(function () {
                var all_num = parseInt(assign_spider_num.val()) + parseInt(agent_spider_num.val());
                spider_all_num.text(all_num);
            });

            // 清空指派爬虫窗口所有内容
            function assign_spider_clear() {
                spider_all_num.text('0');
                spider_box_body.find('input').each(function () {
                    $(this).val('0');
                });
            };
            $('.spider-close').click(function () {
                assign_spider_clear();
            });


            // 指派相关爬虫 form-data-input  alert_base
            $('#spider-assign').click(function () {
                var selected_config = [];
                $('input[name="td_checkbox"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        selected_config.push($(this).val());
                    }
                });
                var configs_length = selected_config.length;
                if (configs_length > 1) {
                    alert_content.text('只能选择一个配置！');
                    alert_window.modal();
                } else if (configs_length < 1) {
                    alert_content.text('必须选择一个配置！');
                    alert_window.modal();
                } else {
                    var cid = selected_config[0];
                    $('#spider-label-config').text(cid);
                    $('#spider_cid').val(cid);

                    // 获取空闲爬虫数
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'task:spider_free_num' %}",
                        dataType: 'json',
                        data: {
                            tag: 'config',
                            post_id: cid,
                        },
                        success: function (data, textStatus) {
                            console.log(data);
                            var real_free_num = parseInt(data['num']) + parseInt(data['spider-all-num']);
                            spider_free_num.text(data['num']);
                            spider_all_num.text(data['spider-all-num']);
                            spider_all_num_real.text(real_free_num);
                            spider_box_body.find('input').each(function () {
                                $(this).val(data[$(this).attr('id')]);
                            });
                            spider_window.modal();
                        },
                        error: function (xhr, err) {
                            alert_content.text('获取空闲爬虫数目错误！');
                            alert_window.modal();
                        }
                    });

                }

            });
            $('#spider-submit').click(function () {
                var error_tag = 0;
                var proxy_num = 0;
                var mes = '';

                if ($('#spider_type').val().length == 0) {
                    error_tag += 1;
                    mes = '必须选择爬虫类型！';
                    alert_base(mes);
                    return false;
                }

                spider_box_body.find('input').each(function () {
                    var r_val = parseInt($(this).val());
                    if (isNaN(r_val)) {
                        var this_name = $(this).attr('label_name');
                        mes = '字段-' + this_name + '-输入有误，请检查后在输入';
                        error_tag += 1;
                        alert_base(mes);
                        return false;
                    }
                });
                if (error_tag > 0) {
                    alert_base(mes);
                    return false;
                } else {
                    var free_num = parseInt(spider_all_num_real.text());
                    var assign_num = parseInt(assign_spider_num.val());
                    var agent_num = parseInt(agent_spider_num.val());
                    var all_num = assign_num + agent_num;
                    $('.form-data-input').each(function () {
                        if ($(this).val().length > 0) {
                            proxy_num += parseInt($(this).val());
                        }
                    });
                    if (all_num == 0) {
                        mes = '您没有指派爬虫！';
                        error_tag += 1;
                    } else if (all_num > free_num) {
                        mes = '指派的爬虫数超出空闲爬虫数！';
                        error_tag += 1;
                    } else if (agent_num > all_num) {
                        mes = '代理爬虫数超出指派爬虫数！';
                        error_tag += 1;
                    } else if (proxy_num > agent_num) {
                        mes = '指定代理爬虫数超出代理爬虫数！';
                        error_tag += 1;
                    }

                    if (error_tag > 0) {
                        alert_base(mes);
                        return false;
                    } else {

                    }
                }

            });

            var spiderdata = [];

            var exact_spider_vue = new Vue({
                el: "#exact-spider-assign-box-body",
                data: {
                    spiders: [],
                    num: 0,
                },
                methods: {
                    search: function () {
                        var search_val = $('#spider_search').val();
                        if (search_val == false) {
                            this.spiders = spiderdata;
                            this.num = spiderdata.length
                        } else {
                            var search_ret = [];
                            for (var index in spiderdata) {
                                var s = spiderdata[index];
                                for (var f in s) {
                                    var f_val = String(s[f]);
                                    if (f_val.indexOf(search_val) != -1) {
                                        search_ret.push(s)
                                    }
                                }
                            }
                            this.spiders = search_ret;
                            this.num = search_ret.length;
                        }
                    }
                }
            });

            // 精确指定爬虫相关参数
            var exact_spider_free_num = $('#exact-spider-assign-free-num');
            var exact_spider_window = $('#exact-spider-assign-window');
            var exact_spider_box_body = $('#exact-spider-assign-box-body');
            var exact_spider_all_num = $('#exact-spider-assign-all-num');
            var exact_spider_all_num_real = $('#exact-spider-assign-all-num-real');
            var exact_assign_spider_num = $('#exact-spider-assign-num');
            var now_spider_num = $('#now_spider_num');
            var now_agent_spider_num = $('#now_agent_spider_num');
            var exact_new_spider_num = $('#exact_new_spider_num');
            var exact_new_agent_spider_num = $('#exact_new_agent_spider_num');

            var spiders_get_by_type_url = $('#spiders_get_by_type_url').text();

            function exact_close() {
                exact_spider_all_num.text(0);
                exact_spider_all_num_real.text(0);
                now_spider_num.text(0);
                now_agent_spider_num.text(0);
                exact_new_spider_num.text(0);
                exact_new_agent_spider_num.text(0);
                $('input[name="spider_th_checkbox"]').attr('checked', false);
                $('#exact_spider_type').val('none');
                $('#exact_spider_type').trigger('change');
            }

            $('#exact-spider-assign-close').click(function () {
                exact_close();
            });

            $('#exact-close-top').click(function () {
                exact_close();
            });

            // 精确指定爬虫checkbox选择
            $('input[name="spider_th_checkbox"]').click(function () {
                var children_checkboxes = $(this).closest('#exact_table').find('input[name="spider_td_checkbox"]');
                if ($(this).prop('checked') == true) {
                    $(this).attr("checked", true);
                    children_checkboxes.each(function () {
                        $(this).prop("checked", "checked");
                    })
                } else {
                    $(this).attr("checked", false);
                    children_checkboxes.each(function () {
                        $(this).removeAttr('checked')
                    })
                }
                var checked_num = 0;
                var e_agent_num = 0;
                children_checkboxes.each(function () {
                    if ($(this).prop('checked') == true) {
                        checked_num += 1;
                        var this_proxy_id = 'exact-proxy-' + $(this).val();
                        if ($('#' + this_proxy_id).val() != '0') {
                            e_agent_num += 1
                        }
                    }
                });
                exact_spider_all_num.text(checked_num);
                exact_new_agent_spider_num.text(e_agent_num);
                exact_new_spider_num.text(checked_num - e_agent_num);
            });

            $('#exact_table').on('click', 'input[name="spider_td_checkbox"]', function () {
                var parent_checkbox = $(this).closest('#exact_table').find('input[name="spider_th_checkbox"]');
                var children_checkboxes = $(this).closest('#exact_table').find('input[name="spider_td_checkbox"]');
                var checked_num = 0;
                var e_agent_num = 0;
                children_checkboxes.each(function () {
                    if ($(this).prop('checked') == true) {
                        checked_num += 1;
                        var this_proxy_id = 'exact-proxy-' + $(this).val();
                        if ($('#' + this_proxy_id).val() != '0') {
                            e_agent_num += 1
                        }
                    }
                });
                exact_spider_all_num.text(checked_num);
                exact_new_agent_spider_num.text(e_agent_num);
                exact_new_spider_num.text(checked_num - e_agent_num);

                if (checked_num == children_checkboxes.length) {
                    parent_checkbox.prop("checked", "checked");
                } else {
                    parent_checkbox.removeAttr('checked')
                }
            });

            $('#exact_table').on('change', '.exact_spider_proxy', function () {
                var this_td_checkbox = $(this).closest('tr').find('input[name="spider_td_checkbox"]');
                if (this_td_checkbox.prop('checked') == true) {
                    var e_all_num = parseInt(exact_spider_all_num.text());
                    var e_agent_num = parseInt(exact_new_agent_spider_num.text());
                    var old_val = parseInt($(this).attr('old_val'));
                    var new_val = parseInt($(this).val());
                    if (old_val == 0) {
                        e_agent_num = e_agent_num + 1
                    } else if (old_val > 0 && new_val == 0) {
                        e_agent_num = e_agent_num - 1
                    }
                    $(this).attr('old_val', new_val);
                    exact_new_agent_spider_num.text(e_agent_num);
                    exact_new_spider_num.text(e_all_num - e_agent_num);
                }
            });


            // 根据爬虫类型变化获取空闲爬虫
            $('#exact_spider_type').change(function () {
                var c_s_type = $(this).val();
                // 获取指定类型的爬虫
                $.ajax({
                    type: 'POST',
                    url: spiders_get_by_type_url,
                    dataType: 'json',
                    data: {
                        type_name: c_s_type,
                    },
                    success: function (data, textStatus) {
                        console.log(data);
                        var tag = data['tag'];
                        spiderdata = data['spiders'];
                        if (parseInt(tag) != 0) {
                            alert(data['mes'])
                        } else {
                            exact_spider_vue.$data.spiders = spiderdata;
                            exact_spider_vue.$data.num = data['num'];
                        }
                    },
                    error: function (xhr, err) {
                        alert_content.text('获取指定类型爬虫错误！');
                        alert_window.modal();
                    }
                });
            });


            // 精确指定相关爬虫
            $('#exact-spider-assign').click(function () {
                var selected_config = [];
                $('input[name="td_checkbox"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        selected_config.push($(this).val());
                    }
                });
                var configs_length = selected_config.length;
                if (configs_length > 1) {
                    alert_content.text('只能选择一个配置！');
                    alert_window.modal();
                } else if (configs_length < 1) {
                    alert_content.text('必须选择一个配置！');
                    alert_window.modal();
                } else {
                    var cid = selected_config[0];
                    $('#exact-spider-assign-label-config').text(cid);
                    $('#exact-spider-assign-cid').val(cid);

                    // 获取空闲爬虫数
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'task:spider_free_num' %}",
                        dataType: 'json',
                        data: {
                            tag: 'config',
                            post_id: cid,
                        },
                        success: function (data, textStatus) {
                            console.log(data);
                            var real_free_num = parseInt(data['num']) + parseInt(data['spider-all-num']);
                            exact_spider_free_num.text(data['num']);
                            exact_spider_all_num.text(data['spider-all-num']);
                            exact_spider_all_num_real.text(real_free_num);
                            now_spider_num.text(data['spider_num']);
                            now_agent_spider_num.text(data['agent_spider_num']);

                            exact_spider_window.modal();
                        },
                        error: function (xhr, err) {
                            alert_content.text('获取空闲爬虫数目错误！');
                            alert_window.modal();
                        }
                    });

                }

            });


            function export_window_clear() {
                exporte_create_div.css('display', 'block');
                exporte_progress_div.css('display', 'none');
                exporte_result_div.css('display', 'none');
                exporte_result_a.attr('href', '');
                exporte_result_a.text('');
            };

            $('#export-data-close-top').click(function () {
                export_window_clear();
            });

            $('#export-data-close').click(function () {
                export_window_clear();
            });


            // 导出搜索结果
            var filter_dict_json = $('#filter_dict_json').text();
            var exporte_create_div = $('#export-data-create');
            var exporte_progress_div = $('#export-data-progress');
            var exporte_result_div = $('#export-data-result');
            var exporte_result_a = $('#export-data-file');
            var exporte_result_num = $('#export-data-num');
            var export_url = $('#export_data_url').text();
            $('#export-data-btn').click(function () {
                $('#export-data-window').modal();
            });

            $('#export-data-submit').click(function () {
                var selected_config = [];
                $('input[name="td_checkbox"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        selected_config.push($(this).val());
                    }
                });
                var selected_field = [];
                $('input[name="export-data-checkbox"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        selected_field.push($(this).val());
                    }
                });
                if (selected_config.length > 0) {
                    exporte_result_num.text(selected_config.length)
                } else {
                    exporte_result_num.text($('#config-all-num').text())
                }

                exporte_create_div.css('display', 'none');
                exporte_progress_div.css('display', 'block');
                // 发送爬取数据
                $.ajax({
                    type: 'POST',
                    url: export_url,
                    dataType: 'json',
                    data: {
                        selected_config: JSON.stringify(selected_config),
                        selected_field: JSON.stringify(selected_field),
                        filter_dict_json: filter_dict_json,
                    },
                    success: function (data, textStatus) {
                        console.log(data);
                        var tag = data['tag'];
                        spiderdata = data['spiders'];
                        if (parseInt(tag) != 0) {
                            alert(data['mes'])
                        } else {
                            exporte_result_a.attr('href', data['href']);
                            exporte_result_a.text(data['file']);
                            exporte_progress_div.css('display', 'none');
                            exporte_result_div.css('display', 'block');
                        }
                    },
                    error: function (xhr, err) {
                        alert_content.text('生成文件时发生内部错误！');
                        alert_window.modal();
                    }
                });

            });
        });
    </script>
{% endblock body_js %}